<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <link href="<%=path%>/CSS/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
    <%@ include file="/WEB-INF/JSP/ajax.jsp" %>
    <script type="text/javascript"
            src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
        .seachform li label {
            line-height: 45px;
            color: #444444
        }

        .scinput {
            line-height: 10px;
            margin-top: 5px
        }

        .scinput1 {
            margin-top: 5px;
            height: 30px;
        }

        .scbtn {
            background: #57a0ff;
            border-radius: 20px;
            width: 110px;
            margin-top: 4px;
            height: 35px
        }

        .scbtn2 {
            height: 20px;
            background: #57a0ff;
            border-radius: 20px;
            width: 50px;
            color: #fff;
            display: none;
        }

        .tablelist th {
            background: none;
            border-bottom: none;
        }

        thead {
            background: #f2f2f2
        }

        tbody tr:nth-child(even) {
            background: #f7f8fd
        }

        .tablelist td {
            border-right: none;
            text-align: center
        }

        tbody tr {
            height: 38px
        }

        .check {
            padding-left: 0px
        }

        a {
            cursor: pointer;
        }

        .tablelist {
            width: 500px;
            border: 0px;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .tablelist tr {
            height: 40px;
        }

        .tablelist tr td {
            border-bottom: 1px solid #BBB;
        }

        #table1 tr th {
            height: 20px;
            border-bottom: 1px solid #bbb;
            border-top: 1px solid #bbb;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb
        }

        tr td {
            border: solid 1px #ccc;
        }

        .subjectOne {
            background: rgb(255, 255, 216);
        }

        .selelects {

            width: 150px;
            height: 30px;

            width: 130px;
            height: 30px;

            line-height: 45px;
            margin-top: 7px;
            border: solid 1px #ccc;
        }

        .scinput {
            line-height: 10px;
            margin-top: 5px
        }

        .scinput1 {
            margin-top: 5px;
            height: 30px;
        }

        .scbtn {
            background: #57a0ff;
            border-radius: 20px;
            width: 110px;
            height: 35px;
            margin-left: 40px;
        }

        thead {
            background: #f2f2f2
        }

        .template th {
            height: 45px;
            background: none;
        }

        .template tr {
            height: 45px;
        }

        .template tr th {
            height: 20px;
            border-left: 1px solid #dddee6;
            border-right: 1px solid #dddee6;
            color: #444444;
            text-align: center;
        }

        .tou {
            background: #e4eafe
        }

        .kh {
            border-bottom: 1px solid #dddee6;
        }

        .shuju td {
            border: 1px solid #dddee6;
            color: #787c88;
            text-align: center;
        }

        .shuju:nth-child(odd) {
            background: #ffffff
        }

        .shuju:nth-child(even) {
            background: #f3f5fb
        }

        .shuju:last-child {
            border-bottom: 1px solid #dddee6;
        }

        .shuju:HOVER {
            background: #fff6cd;
        }
    </style>
</head>
<body style="background: #f5f5f5;padding: 0 10px;">
<div class="place" style="background: #f5f5f5; margin-top: 10px">
    <ul class="placeul">
        <li><a href="#">报表</a></li>
        <li><a href="#">管理报表</a></li>
        <li><a href="<%=path%>/DrivingSys/queryNotCheckBillsJournal/look.action">未审核单据报表</a></li>
    </ul>
</div>

<div class="rightinfo"
     style="background: #fff; border-radius: 10px; height: 45px;">

    <form action="<%=path%>/DrivingSys/queryNotCheckBillsJournal/look.action" method="post">
        <ul class="seachform">
            <%-- <li><label>科目</label>
                <select class="selelects" name="subject" >
                    <c:if test="${subject eq ''}">
                        <option value="" selected="selected"></option>
                        <option value="科目一">科目一</option>
                        <option value="科目二">科目二</option>
                        <option value="科目三">科目三</option>
                    </c:if>
                    <c:if test="${subject eq '科目一'}">
                        <option value="" ></option>
                        <option value="科目一" selected="selected">科目一</option>
                        <option value="科目二">科目二</option>
                        <option value="科目三">科目三</option>
                    </c:if>
                    <c:if test="${subject eq '科目二'}">
                        <option value="" ></option>
                        <option value="科目一">科目一</option>
                        <option value="科目二" selected="selected">科目二</option>
                        <option value="科目三">科目三</option>
                    </c:if>
                    <c:if test="${subject eq '科目三'}">
                        <option value="" ></option>
                        <option value="科目一">科目一</option>
                        <option value="科目二">科目二</option>
                        <option value="科目三" selected="selected">科目三</option>
                    </c:if>
                </select>
            </li>		 --%>
            <li><label>开始时间</label><input class="scinput1" name="beginTime"
                                          type="text"
                                          onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM-dd'})"
                                          id="datemin" class="input-text Wdate" style="width: 150px;"
                                          value="${beginTime}"></li>
            <li><label>结束时间</label><input class="scinput1" name="endTime"
                                          type="text"
                                          onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd'})"
                                          id="datemax" class="input-text Wdate" style="width: 150px;"
                                          value="${endTime}"></li>
            <li><label>&nbsp;</label><input name="" type="submit"
                                            class="scbtn" value="立即查询"/></li>
            <shiro:hasPermission name="/outXlsNotCheckBills">
                <li><label>&nbsp;</label><input name="" type="button" id="dc"
                                                class="scbtn" value="导出Excel"/></li>
            </shiro:hasPermission>
        </ul>
    </form>
</div>
<form action="<%=path%>/DrivingSys/outXls" method="post" id="outXls">
    <input id="xls" type="hidden" name="xls" value="">
    <input type="hidden" name="fileNames" value="${beginTime } 至 ${endTime}未审核单据报表">
</form>

<div style="width: 100%; overflow: auto; margin-top: 30px; background: #fff; box-shadow: 0 0 10px #f2f2f2; min-height: 600px;"
     class="info">
    <table class="template" style="width: 500px;" align="center">
        <tr class="tou">
            <th style="text-align: center; width: 5px">序号</th>
            <th style="text-align: center; width: 20px">部门</th>
            <th style="text-align: center; width: 10px">人员</th>
            <th style="text-align: center; width: 20px">单据</th>
            <th style="text-align: center; width: 10px">数量</th>
        </tr>
        <c:forEach items="${notCheckBillsJournalList }" var="notCheckBillsJournal" varStatus="status">
            <tr class="shuju">
                <td style="text-align: center; width: 5px" class="xuhao"></td>
                <td style="text-align: center; width: 20px">${notCheckBillsJournal.departmentName }</td>
                <td style="text-align: center; width: 10px">${notCheckBillsJournal.crateName }</td>
                <td style="text-align: center; width: 20px">${notCheckBillsJournal.billName }</td>
                <td style="text-align: center; width: 10px">${notCheckBillsJournal.num }</td>
            </tr>
        </c:forEach>
    </table>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {


        function _w_table_rowspan(_w_table_id, _w_table_colnum) {
            var _w_table_firsttd = "";//需要合并的第一行
            var _w_table_currenttd = "";//当前行
            var _w_table_SpanNum = 0;//相同的行数
            var num_person = 0;//人员数量统计
            var num_department = 0;//部门数量统计
            var length = $(_w_table_id).find('tr').length//表格的长度
            var _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
            //需要增加的人员小计行
            _w_table_Obj.each(function (i) {
                // console.log("长度:"+length + "当前的行："+i)
                //统计相同部门的数量
                if ($(this).next().text() == '小计') {
                    num_department += Number($(this).next().parent().find("td:last").text())
                }
                if (i == 0) {
                    _w_table_firsttd = $(this);
                    _w_table_SpanNum = 1;
                    num_person = Number(_w_table_firsttd.parent().find("td:last").text())
                } else {
                    //alert(" 判断之前: "+_w_table_SpanNum)
                    _w_table_currenttd = $(this);
                    if (_w_table_SpanNum == 1) {
                        num_person = Number(_w_table_firsttd.parent().find("td:last").text())
                    }
                    if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
                        num_person += Number(_w_table_currenttd.parent().find("td:last").text())
                        _w_table_SpanNum++;
                        _w_table_currenttd.remove(); //remove();
                        _w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
                        if (i == length - 2) {
                            var str = '';//需要添加的行
                            if (_w_table_colnum == 3) {
                                str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
                                str += '<td style="text-align: center; width: 20px; background: rgb(255,255,216);font-weight:bold;" >' + _w_table_firsttd.prev().html() + '</td>'
                                str += '<td style="text-align: center; width: 10px;background: rgb(255,255,216);font-weight:bold;" >小计</td>'
                                str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" ></td>'
                                str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" >' + num_person + '</td></tr>'
                                num_person = 0;
                            }
                            if (_w_table_colnum == 2) {
                                str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
                                str += '<td style="text-align: center; width: 20px; background: rgb(240,230,140);font-weight:bold;" >小计</td>'
                                str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" ></td>'
                                str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" ></td>'
                                str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" class="num_department">' + num_department + '</td></tr>'
                                num_department = 0;//一个部门统计结束后清空数量
                            }
                            $(_w_table_id).append(str)
                        }
                    } else {
                        var str = '';//需要添加的行
                        if (_w_table_Obj.length - 1 == i) {
                            var temp = $(this).parent().find("td").eq(2).text();
                            var count = 0;
                            for (var j = 0; j < _w_table_Obj.length - 1; j++) {
                                console.log($(_w_table_id).find("tr").eq(j).find("td").eq(2).text())
                                if ($(_w_table_id).find("tr").eq(j).find("td").eq(2).text() == temp) {
                                    count++;
                                }
                            }
                            if (count == 0) {
                                if (_w_table_colnum == 3) {
                                    str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
                                    str += '<td style="text-align: center; width: 20px; background: rgb(255,255,216);font-weight:bold;" >' + _w_table_firsttd.prev().html() + '</td>'
                                    str += '<td style="text-align: center; width: 10px;background: rgb(255,255,216);font-weight:bold;" >小计</td>'
                                    str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" ></td>'
                                    str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" >' + $(this).next().parent().find("td:last").text() + '</td></tr>'
                                }
                                $(this).parent().after(str);
                            }
                        }
                        if (_w_table_colnum == 3) {
                            str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
                            str += '<td style="text-align: center; width: 20px; background: rgb(255,255,216);font-weight:bold;" >' + _w_table_firsttd.prev().html() + '</td>'
                            str += '<td style="text-align: center; width: 10px;background: rgb(255,255,216);font-weight:bold;" >小计</td>'
                            str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" ></td>'
                            str += '<td style="text-align: center; width: 10px; background: rgb(255,255,216);font-weight:bold;" >' + num_person + '</td></tr>'
                            num_person = 0;
                        }
                        if (_w_table_colnum == 2) {
                            str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
                            str += '<td style="text-align: center; width: 20px; background: rgb(240,230,140);font-weight:bold;" >小计</td>'
                            str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" ></td>'
                            str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" ></td>'
                            str += '<td style="text-align: center; width: 10px; background: rgb(240,230,140);font-weight:bold;" class="num_department">' + num_department + '</td></tr>'
                            num_department = 0;//一个部门统计结束后清空数量
                        }
                        $(this).parent().prev().after(str)
                        _w_table_firsttd = $(this);
                        _w_table_SpanNum = 1;
                    }
                }
            });
        }

        _w_table_rowspan(".template", "3")
        _w_table_rowspan(".template", "2")
        //统计总计数量
        var sum = 0;
        $(".num_department").each(function (i) {
            sum += Number($(this).text());
        })
        var str = '';
        str = '<tr><td style="text-align: center; width:5px" class="xuhao"></td>'
        str += '<td style="text-align: center; width: 20px; background: rgb(255,215,0);font-weight:bold;" >总计</td>'
        str += '<td style="text-align: center; width: 10px; background: rgb(255,215,0);font-weight:bold;" ></td>'
        str += '<td style="text-align: center; width: 20px; background: rgb(255,215,0);font-weight:bold;" ></td>'
        str += '<td style="text-align: center; width: 10px; background: rgb(255,215,0);font-weight:bold;" >' + sum + '</td></tr>'
        $(".template").append(str);
        //处理序号
        $(".xuhao").each(function (i) {
            $(this).html(i + 1)
        })

    })

    $("#dc").click(function () {
        //$(".template tr td:nth-child(1)").remove()
        //$(".template tr th:nth-child(1)").remove()
        var tableHtml = $(".info").html()

        $("#xls").val(tableHtml)
        //alert($("#xls").val())
        $("#outXls").submit();

    })

    //num是要处理的数字  v为要保留的小数位数
    function decimal(num, v) {
        var vv = Math.pow(10, v);
        return Math.round(num * vv) / vv;
    }


</script>
</html>